<div>
  <label>${nls.selectDrawMode}</label>
  <div data-dojo-attach-point="drawBox" data-dojo-type="jimu/dijit/DrawBox" data-dojo-props='types:["point","polyline","polygon","text"],showClear:false,deactivateAfterDrawing:false' style="margin-top:5px;"></div>
  <div data-dojo-attach-point="settingContent" style="width:100%;">
    <div class="point-section" data-dojo-attach-point="pointSection">
      <div data-dojo-attach-point="pointSymChooser" data-dojo-type="jimu/dijit/SymbolChooser" data-dojo-props='type:"marker"'></div>
    </div>

    <div class="line-section" data-dojo-attach-point="lineSection">
      <div data-dojo-attach-point="lineSymChooser" data-dojo-type="jimu/dijit/SymbolChooser" data-dojo-props='type:"line"'></div>
    </div>

    <div class="polygon-section" data-dojo-attach-point="polygonSection">
      <div data-dojo-attach-point="fillSymChooser" data-dojo-type="jimu/dijit/SymbolChooser" data-dojo-props='type:"fill"'></div>
    </div>

    <div class="text-section" data-dojo-attach-point="textSection">
      <div data-dojo-attach-point="textSymChooser" data-dojo-type="jimu/dijit/SymbolChooser" data-dojo-props='type:"text"'></div>
    </div>
  </div>

  <div data-dojo-attach-point="areaMeasure" class="draw-item">
    <div class="header" data-dojo-attach-point="areaMeasureHeader"  data-index="areaMeasure">
      <!-- <span class="arrow jimu-float-leading jimu-trailing-margin05" ></span> -->
      <span class="item-title">${nls.showAreaMeasurement}</span>
      <span class="toggle-draw jimu-trailing-margin1" data-dojo-attach-point="areaToggleDraw"></span>
    </div>
    <div class="body" style="display:none;" data-dojo-attach-point="areaMeasureBody">
      <div class="area-units-tip  jimu-float-leading">${jimuNls.common.unit}:</div>
      <select data-dojo-attach-point="areaUnitSelect" data-dojo-type="dijit/form/Select" class=" jimu-float-trailing" style="width: calc(100% - 130px);height:30px;"></select>
    </div>
  </div>
  <div data-dojo-attach-point="distanceMeasure" class="draw-item">
    <div class="header" data-dojo-attach-point="distanceMeasureHeader" data-index="distanceMeasure" >
      <!-- <span class="arrow jimu-float-leading jimu-trailing-margin05"></span> -->
      <span class="item-title">${nls.showDistanceMeasurement}</span>
      <span class="toggle-draw jimu-trailing-margin1" data-dojo-attach-point="distanceToggleDraw"></span>
    </div>
    <div class="body" style="display:none;" data-dojo-attach-point="distanceMeasureBody">
      <div class="distance-units-tip jimu-float-leading">${jimuNls.common.unit}:</div>
      <select data-dojo-attach-point="distanceUnitSelect" data-dojo-type="dijit/form/Select" class=" jimu-float-trailing" style="width: calc(100% - 130px);height:30px;"></select>
    </div>
  </div>

  <div class="operations" onselectstart="return false;">
    <div class="jimu-btn" data-dojo-attach-point="btnUndo" data-dojo-attach-event="onclick:_onBtnUndoClicked">${nls.undo}</div>
    <div class="jimu-btn" data-dojo-attach-point="btnRedo" data-dojo-attach-event="onclick:_onBtnRedoClicked">${nls.redo}</div>
    <div class="jimu-btn last-btn" data-dojo-attach-point="btnClear" data-dojo-attach-event="onclick:_onBtnClearClicked">${nls.clear}</div>
  </div>
</div>